<template>
    <section class="area-wrapper">
      <el-form :inline="true" :model="searchInfo" class="area-wrapper_search">
        <el-form-item label="委外计划单号">
          <el-input v-model="searchInfo.name" placeholder="请输入委外计划单号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchInfo.productClass" placeholder="请选状态">
            <el-option v-for="item in statusList"
                       :label="item.dicValue"
                       :key="item.dicCode"
                       :value="item.dicCode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="searchInfo.startTime"
            type="date"
            style="width: 45%"
            placeholder="选择日期">
          </el-date-picker>
          <el-date-picker
            v-model="searchInfo.endTime"
            type="date"
            style="width: 45%"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button class="mtb15" type="primary" @click="onCreate">新增委外计划单</el-button>
     <nb-table
      operatorText
      :tableHeaders="tableHeaders"
      :tableData="tableData"
      :fixedOne="fixedOne"
      :clickData="clickData"
      :clickLast="clickLast"
      :format="format"
      @clickRight="clickRight"
      :row="row"
      height="auto"
      operatorFixed="left">
    </nb-table>
    <!-- 分页 -->
    <el-pagination
      align="right"
      style="padding-top: 20px;margin-bottom:100px;"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="searchInfo.current"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="searchInfo.size"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
</section>
</template>

<script>
import NbTable from '@/components/nb-table.vue'
import {removeEmptyParams} from '@/common/utils'

export default {
  components: {
    NbTable
  },
  data () {
    return {
      total: 0,
      searchInfo: {
        current: 1,
        size: 10
      },
      tableHeaders: [
        {headerKey: 'name', headerName: '委外计划单号'},
        {headerKey: 'parentCode1', headerName: '创建人'},
        {headerKey: 'parentCode2', headerName: '创建时间'},
        {headerKey: 'parentCode3', headerName: '最近审核人'},
        {headerKey: 'parentName4', headerName: '最近审核时间'}
      ],
      tableData: [], // table数据
      fixedOne: false,
      clickOne: false,
      clickLast: true,
      categoryList: [],
      row: [],
      format: [{
        need: 'advisorMobile',
        type: 'phone'
      }],
      clickData: [
        {
          name: '编辑',
          type: 'edit'
        },
        {
          name: '删除',
          type: 'delete'
        },
        {
          name: '撤回',
          type: 'recall'
        },
        {
          name: '关单',
          type: 'close'
        },
        {
          name: '生成生产计划入库单',
          type: 'go'
        }
      ],
      statusList: [
        {
          dicValue: '启用',
          dicCode: 1
        },
        {
          dicValue: '禁用',
          dicCode: 0
        }
      ]
    }
  },
  created () {
    this.getAreaList()
  },
  methods: {
    async getAreaList () {
      const temp = removeEmptyParams(this.searchInfo)
      let {data} = await this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/page`, temp)
      this.tableData = data.records
      this.total = data.total
      this.searchInfo.size = data.size
      this.searchInfo.current = data.current
    },
    onQuery () {
      this.searchInfo.name = this.searchInfo.name && this.searchInfo.name.trim()
      this.searchInfo.areaNo = this.searchInfo.areaNo && this.searchInfo.areaNo.trim()
      this.searchInfo.parentName = this.searchInfo.parentName && this.searchInfo.parentName.trim()
      this.getAreaList()
    },
    onReset () {
      this.searchInfo.name = ''
      this.searchInfo.areaNo = ''
      this.searchInfo.parentName = ''
      this.searchInfo.parentCode = ''
      this.getAreaList()
    },
    onCreate () {
      this.changeRoute()
    },
    clickRight (data) {
      switch (data.type) {
        case 'edit':
          this.editItem(data.row.id)
          break
        case 'delete':
          this.deleteItem(data.row)
          break
        case 'recall':
          this.recallItem(data.row)
          break
        case 'close':
          this.closeItem(data.row)
          break
        case 'go':
          this.goPage(data.row)
          break
      }
    },
    delQueryModel () {},
    // 编辑
    editItem (pa) {
      pa && this.changeRoute(pa)
    },
    changeRoute (pa) {
      this.$router.push({
        name: 'createPlan',
        params: {
          id: pa || 'new'
        }
      })
    },
    deleteItem (val) {
      this.$confirm('确认删除此区域？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/delete`, {id: val.id, code: val.code, parentCode: val.parentCode}).then((res) => {
          if (res.result) {
            this.$message.success('操作成功')
            this.searchInfo.current = 1
            this.getAreaList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    sizeChangeHandle (val) {
      this.searchInfo.size = val
      this.getAreaList()
    },
    currentChangeHandle (val) {
      this.searchInfo.current = val
      this.getAreaList()
    },
    recallItem (val) {
      this.$confirm('确认撤回此单？', '撤回确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post(`/${this.$const.PREFIX.MAINDATA}/mareas/deletes`, {id: val.id}).then((res) => {
          if (res.result) {
            this.$message.success('操作成功')
            this.searchInfo.current = 1
            this.getAreaList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    closeItem (val) {
      console.log('closeItem', val)
    },
    goPage (val) {
      console.log('goPage', val)
    }
  }
}
</script>
<style lang="scss">
.area-wrapper{
  &_search{
    background: white;
    padding: 20px 0 0 20px;
  }
}
.mtb15{
  margin: 15px 0;
}
</style>